<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="elementUI/theme-default/index.css" />
    </head>
    <body>
        <!-- <script src="http://unpkg.com/vue/dist/vue.js"></script>
        <script src="http://unpkg.com/element-ui@1.3.5/lib/index.js"></script> -->
        <script src="js/vue.js"></script>
        <script src="elementUI/index.js"></script>
        <script src="js/echarts.common.min.js"></script>
        <div id="app">
          <el-row>
              <el-col :span="12">
                  <div id="operateLogChart" style="height:400px"></div>
              </el-col>
              <el-col :span="12">
                  <div id="checkedDetailChart" style="height:400px"></div>
              </el-col>
          </el-row>
        </div>
        <style>
            .red{
                color:red;
            }
            .h3{
                font-size:16px;
            }
        </style>
        <script>
          new Vue({
            el:'#app',
            data() {
              return {
                activeName: 'first',
                filterType:'',
                pickerOptions: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
              dateRange: '',
              operateLogChart:{},
              checkedDetailChart:{},
              operatedNews: [
                  {
                    date:'2017-05-06',
                    title:'崔永元网店一瓶油卖780，网友：孟非家398的牛肉好便宜',
                    source:'星辰娱乐',
                    type:'娱乐',
                    videoUrl:'http://mp.eastday.com/dfh/html/20170524/1495610180609037684.html',
                    operator:'朱成斌',
                    operateDetail:'新增'
                  },
                  {
                    date:'2017-04-06',
                    title:'崔永元网店一瓶油卖780，网友：孟非家398的牛肉好便宜',
                    source:'星辰娱乐',
                    type:'娱乐',
                    videoUrl:'http://mp.eastday.com/dfh/html/20170524/1495610180609037684.html',
                    operator:'朱成斌',
                    operateDetail:'加黑'
                  },
                  {
                    date:'2017-03-06',
                    title:'崔永元网店一瓶油卖780，网友：孟非家398的牛肉好便宜',
                    source:'星辰娱乐',
                    type:'娱乐',
                    videoUrl:'http://mp.eastday.com/dfh/html/20170524/1495610180609037684.html',
                    operator:'朱成斌',
                    operateDetail:'撤销'
                  }
              ]
              }
            },
            mounted: function(){
                var _this=this;
                _this.operateLogChart=echarts.init(document.getElementById('operateLogChart'));
                _this.checkedDetailChart=echarts.init(document.getElementById('checkedDetailChart'));

                _this.operateLogChart.setOption({
                    title:{
                      text:'共操作新闻458篇'
                    },
                    tooltip: {},
                    legend:{
                      data:['操作新闻概览']
                    },
                    xAxis: {
                        data: ["审核", "新增", "编辑", "操作"]
                    },
                    yAxis: {},
                    series: [{
                        name: '操作新闻概览',
                        type: 'bar',
                        data: [5, 20, 36, 10]
                    }]
                });
                // let option = {
                //     title: {
                //         text: 'ECharts 入门示例'
                //     },
                //     tooltip: {},
                //     // legend: {
                //     //     data:['销量']
                //     // },
                //     xAxis: {
                //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                //     },
                //     yAxis: {},
                //     series: [{
                //         name: '销量',
                //         type: 'bar',
                //         data: [5, 20, 36, 10, 10, 20]
                //     }]
                // };
                // _this.checkedDetailChart.setOption(option);
                _this.checkedDetailChart.setOption({
                    title: { text: '审核详情' },
                    tooltip: {},
                    xAxis: {
                        data: ["审核", "新增", "编辑", "操作"]
                    },
                    yAxis: {},
                    series: [{
                        name: '操作新闻概览',
                        type: 'bar',
                        data: [5, 20, 36, 10]
                    }]
                });
                // _this.checkedDetailChart.setOption=({
                //     title:{
                //       text:'审核详情'
                //     },
                //     tooltip: {},
                //     legend:{
                //       data:['审核详情1']
                //     },
                //     xAxis: {
                //         data: ["审核通过", "审核拒绝", "驳回编辑"]
                //     },
                //     yAxis: {},
                //     series: [{
                //         name: '审核详情1',
                //         type: 'pie',
                //         data: [5, 20, 36, 10]
                //     }]
                // });
            },
            methods: {
              handleClick(tab, event) {
                console.log(tab, event);
              },
              operateLog() {
                console.log("1")
              }
            }
          });
        </script>
    </body>
</html>